<script>
import { mapMutations } from 'vuex'
import { op } from './utils/API.js'
export default {
	methods: {
		...mapMutations(['login']),
		getQuery(scheme, name) {
			// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
			let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
			let r = scheme.substr(10).match(reg) //substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用,但是它没有标准化
			if (r != null) {
				// 对参数值进行解码
				return unescape(r[2])
			}
			return null
		},
		getCartList() {
			this.$http
				.ajax({
					url: '/ShoppingTrolley/list',
					params: {
						openId: uni.getStorageSync('openId')
					}
				})
				.then((res) => {
					if (res.code == 0 && res.count > 0) {
						let number = res.data.reduce((a, b) => {
							return a + b.goodsNumber
						}, 0)
						uni.setStorageSync('cartNum', number)
						uni.setTabBarBadge({
							index: 2,
							text: JSON.stringify(number)
						})
					} else {
						uni.setStorageSync('cartNum', 0)
						uni.removeTabBarBadge({
							index: 2
						})
					}
				})
		}
	},
	onLaunch: function () {
		let _this = this
		uni.getSystemInfo({
			success: function (res) {
				_this.$options.globalData.windowHeight = res.windowHeight
				_this.$options.globalData.statusBarHeight = res.statusBarHeight
			}
		})

		let phone = uni.getStorageSync('phone') || null
		let userInfo = uni.getStorageSync('userInfo') || null
		let openId = uni.getStorageSync('openId') || null

		if (phone && openId) {
			this.login(userInfo)
			this.getCartList()
		}
	},
	onShow: function () {
		console.log('App Show')
	},
	onHide: function () {
		console.log('App Hide')
		this.$options.globalData.gzbh = ''
	},
	globalData: {
		windowWidth: null, // 可视化宽度
		statusBarHeight: null, // 状态栏高度
		mobileScale: null, // 手机比例
		screenHeight: null, // 屏幕高度
		windowHeight: null, // 可用高度
		gzbh: '',
		latitude: '',
		longitude: ''
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
}

.container {
	padding: 0 20rpx;
	background-color: #f5f5f5;
	font-family: PingFang SC;
	min-height: 100%;
}

.w100 {
	width: 100%;
}

.flex {
	display: flex;
}

.flex1 {
	flex: 1;
}

.grow {
	flex-grow: 1;
}

.wrap {
	flex-wrap: wrap;
}

.f-column {
	flex-direction: column;
}

.f-align {
	align-items: center;
}

.f-align-end {
	align-items: flex-end;
}

.f-justifyC {
	justify-content: center;
}

.f-justifyB {
	justify-content: space-between;
}

.f-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.font22 {
	font-size: 22rpx;
	line-height: 30rpx;
}

.font24 {
	font-size: 24rpx;
	line-height: 34rpx;
}

.font26 {
	font-size: 26rpx;
	line-height: 36rpx;
}

.font28 {
	font-size: 28rpx;
	line-height: 40rpx;
}

.font30 {
	font-size: 30rpx;
	line-height: 42rpx;
}

.font32 {
	font-size: 32rpx;
	line-height: 44rpx;
}

.font36 {
	font-size: 36rpx;
	line-height: 36rpx;
}
.font40 {
	font-size: 40rpx;
	line-height: 56rpx;
}

.font44 {
	font-size: 44rpx;
	line-height: 60rpx;
}
.font60 {
	font-size: 60rpx;
	line-height: 84rpx;
}

.bold {
	font-weight: bold;
}

.white {
	color: #ffffff;
}

.black {
	color: #000000;
}

.gray999 {
	color: #999999;
}

.gray777 {
	color: #777777;
}

.gray666 {
	color: #666666;
}

.gray333 {
	color: #333333;
}

.red {
	color: #ff0000;
}

.blue {
	color: #4082ff;
}

.green {
	color: #27bb07;
}

.yellow {
	color: #ffddbd;
}

.vip_c {
	color: #79491a;
}

.text-overflow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mt20 {
	margin-top: 20rpx;
}

.mb20 {
	margin-bottom: 20rpx;
}

.ml20 {
	margin-left: 20rpx;
}

.mr10 {
	margin-right: 10rpx;
}

.mt10 {
	margin-top: 10rpx;
}

.mb10 {
	margin-bottom: 10rpx;
}

.ml10 {
	margin-left: 10rpx;
}

.mr20 {
	margin-right: 20rpx;
}

.pt20 {
	padding-top: 20rpx;
}

.pb20 {
	padding-bottom: 20rpx;
}

.pl20 {
	padding-left: 20rpx;
}

.pr20 {
	padding-right: 20rpx;
}

.common-box {
	width: 710rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	min-height: 124rpx;
	padding: 0 40rpx;
	position: relative;
}

.line::before {
	position: absolute;
	left: 40rpx;
	bottom: 0;
	content: '';
	width: 630rpx;
	height: 2rpx;
	background-color: #cccccc;
}

.common-bottom {
	width: 750rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	padding: 40rpx 0;
}

.common-btn {
	width: 600rpx;
	height: 94rpx;
	background: linear-gradient(-90deg, #ffc81f 0%, #ffe398 100%);
	border-radius: 47rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
}

.nohas-font {
	font-size: 36rpx;
	color: #cccccc;
	margin-top: 300rpx;
}

.mt30 {
	margin-top: 30rpx;
}

.mt40 {
	margin-top: 40rpx;
}

.mt50 {
	margin-top: 50rpx;
}

/*
		全局公共样式和字体图标
	*/
@font-face {
	font-family: zlicon;
	font-weight: normal;
	font-style: normal;
	src: url('./static/yticon.ttf') format('truetype');
}

.zlicon {
	font-family: 'zlicon' !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-right:before {
	content: '\e606';
}

.icon-left:before {
	content: '\e63c';
}

.icon-collect:before {
	content: '\e645';
}

.icon-address:before {
	content: '\e60c';
}

.icon-cart:before {
	content: '\e609';
}

.icon-add:before {
	content: '\e60a';
}

.icon-reduce:before {
	content: '\e60B';
}

.icon-close:before {
	content: '\e622';
}

.icon-check:before {
	content: '\e62f';
}

.icon-nocheck:before {
	content: '\e865';
}

.icon-sijin:before {
	content: '\e602';
}

.icon-saomiao:before {
	content: '\E60D';
}

.icon-sousuo:before {
	content: '\E7CE';
}

.icon-share:before {
	content: '\E60F';
}

view,
scroll-view,
swiper,
swiper-item,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkbox,
form,
input,
label,
radio,
slider,
switch,
textarea,
navigator,
audio,
camera,
image,
video {
	box-sizing: border-box;
}

@mixin text-ellipsis-two($line: 2) {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
}

.text-ellipsis-two {
	@include text-ellipsis-two();
}

.placeholder {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #999999;
	line-height: 40rpx;
}
</style>
